<template>
	<view class="container">
		<view class="header fiexd-head">

			<scroll-view scroll-x="true" class="nav" :scroll-left="navScrollLeft" scroll-with-animation="true">
				<block v-for="(item, index) in navData" data-id="1" :key="index">
					<view @click="toTiao(index)" class="nav-item" :class="[currentTab == index ? 'active' : '']" :data-current="index"
					 data-id="1" bindtap="showGoods">{{ item.text }}</view>
				</block>
			</scroll-view>
		</view>
		<view class="u-flex u-row-center u-m-50" v-if="commentList.length == 0" style="flex-direction: column;">
			<image style="width:300rpx;height:300rpx;" mode="widthFix" src="../../static/img/no.png"></image>
			<text style="color:#ccc">暂无数据</text>
		</view>
		<block v-if="currentTab == 5">
			<view class="comment u-border-bottom" v-for="(res, index) in commentList" :key="index">
				<view class="left" @click="toHomePage(res.userId)">
					<view class="f-logo" :style="{ backgroundImage: 'url(' +  logoMask + ')' }"><img class="rank-img" :src="'../../static/img/rank' + setint(index) + '.png'" /></view>
				</view>
				<view class="right">
					<view class="top">
						<view class="name" @click="toHomePage(res.userId)">{{res.name}}</view>
					</view>
					<view class="tupian u-m-b-20 u-m-t-20">
						<image class="u-m-b-10" mode="aspectFill" :src="res.imageUrl" @tap="previewImage(0,[res.imageUrl])" ></image>					
					</view>
					<view class="u-flex u-row-between">
						<view class="bottom">
							<u-icon name="eye"></u-icon>{{res.viewCount}}
						</view>	
					</view>
				</view>	
			</view>
		</block>
		<block v-else>
		<view class="comment u-border-bottom" v-for="(res, index) in commentList" :key="index">
				
			<view class="left" @click="toHomePage(res.userId)">
				<view class="f-logo" v-if="res.logo" :style="{ backgroundImage: 'url(' + baseUrl+res.logo+ ')' }"><image :src="logoMask" mode="aspectFill"></image></view>
				<view class="f-logo" v-else :style="{ backgroundImage: 'url(' +  logoMask + ')' }">{{res.userName}}</view>
			</view>
			<view class="right">
				<view class="top">
					<view class="name" @click="toHomePage(res.userId)">{{ res.userName }}</view>
					<view class="like" :class="{ highlight: res.isLike }">
					</view>
				</view>
				<view class="content">
					<view>{{ res.article }}</view>
					<view v-for="(f,fi) in res.extraData" :key="fi">{{f.title}}:{{f.value}}</view>
				</view>
				<view class="tupian u-m-b-20 u-m-t-20">
					<image class="u-m-b-10" :class="{'w28':res.list.length > 4}" v-for="(item, index) in res.list" mode="aspectFill" :src="item.image" @tap="previewImage(index,res.list)" :key="index"></image>					
				</view>
				<view class="u-flex u-row-between">
					<view class="bottom">
						{{ res.formatDate }}  <text @click="delComment(res.id)" class="u-m-l-20" v-if="res.userId == my.id && currentTab != 4">删除</text>
					</view>
					<block v-if="currentTab < 4 ">
					<view class="zanpinglun u-flex u-row-center" v-show="res.show">
						<u-icon label="取消" v-if="res.isDz == true" name="heart-fill" :size="35" color="#FF3F71" label-color="#FF3F71" class="u-m-r-20"
						 @click="getLike(res.id)"></u-icon>
						<u-icon label="赞" v-else name="heart" :size="35" color="#ffffff" label-color="#fff" class="u-m-r-20"
						 @click="getLike(res.id)"></u-icon>


						<u-icon label="评论" size="35" name="chat" color="#ffffff" label-color="#fff" @click="showComment(res)"></u-icon>
					</view>

					<view class="pinglun"  @click="open(index)">
						<image src="../../static/img/workping.png"></image>
					</view>
					</block>
					<block v-else>
						<block v-if="currentTab == 5">
							
						</block>
						<view v-if="res.money"><text style="color:red">{{res.money}}</text><text class="u-font-20 u-tips-color">智汇币</text></view>
					</block>
				</view>
				<view class="reply-box" v-if="currentTab < 4">
					<view class="u-flex u-row-start" v-if="res.dzList && res.dzList.length > 0">			
						<view class="username u-p-10 u-m-l-20"><u-icon label="" size="35" name="heart" label-color="#fff" class="u-m-r-10"></u-icon><text v-for="(r,i) in res.dzList" :key="i" @click="toHomePage(r.userId)"><block v-if="i>0 && r.userName != null">，</block>{{ r.userName }}</text></view>
					</view>

					<view v-if="res.plList && res.plList.length > 0" class="item u-row-start u-p-10 u-p-l-20" v-for="(item, index) in res.plList" :key="index">
						<text style="color: #6268F1;" @click="toHomePage(item.buserId)">{{item.buserName?item.buserName:''}}</text><text style="color: #0D1D36;" v-if="item.buserName">回复</text><text v-if="item.userName != null"  style="color: #6268F1;" @click="toHomePage(item.userId)">{{ item.userName }}:</text>
						<text style="flex:1;" @click="replyComment(res,item)">{{ item.comments }}</text>
					</view>
				</view>

			</view>			
		</view>
		</block>
		
		<view class="foot u-border-top" :class="inputShow?'':'none'" :style="[{bottom:InputBottom+'px'}]">
			<view class="cu-avatar round u-flex u-col-center"><u-icon name="edit-pen" size="35"></u-icon></view>
			<input :placeholder="inputPlaceholder" class="padding-lr-sm bg-black " :adjust-position="false" maxlength="300"
			 cursor-spacing="10" confirm-type="send" v-model="inputText" @confirm="sendMsg()" :focus="inputShow" @focus="InputFocus"
			 @blur="InputBlur"></input>
			<button class="cu-btn bg-black shadow" @tap="sendMsg()">发送</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultLogo:"../../static/img/avatar.png",
				logoMask: this.$mAssetsPath.logoMask,
				replay:'',
				comment:{},
				inputShow:false,
				openIndex:0,
				currentTab: 0,
				InputBottom: 0,
				navScrollLeft: 0,
				inputText: '',
				inputPlaceholder: '写下你评论吧',
				userInfo: this.$store.state.userInfo,
				baseUrl:this.$mConfig.baseUrl,
				commentList: [],
				navData: [{
						text: '个人',
						value:'gr'
					},
					{
						text: '团队',
						value:'td'
					},
					{
						text: '企业',
						value:'qy'
					},
					{
						text: '牛人专栏'
					},
					{
						text: '悬赏问答'
					},
					{
						text: '风云榜'
					}
				],
				reqBody:{
					index:1,
					size:10,
					state:'gr'
				},
				plBody:{},
				my:''
			};
		},
		onLoad() {
			this.getComment();
			this.my = this.$store.state.userInfo;
		},
		onPullDownRefresh: function() {
			this.reqBody.index = 1;
			this.getComment();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom:function(e){
				
			// 此tab为空数据
			this.reqBody.index += 1;
			this.loadStatus= "loading";
			this.getComment(this.reqBody.index);
			setTimeout(() => {
				this.loadStatus="loadmore";
			}, 1000);
		},
		methods: {	
			setint(index){
				return parseInt(index) + 1;
			},
			delComment(id){
				var that = this;
				uni.showModal({
					content:"删除该工作圈？",
					confirmText:"删除",
					success: (res) => {  
					if(res.confirm) {  
						that.deleteWorkCircle(id);									
					}  
				}  
				})
				
			},
			async deleteWorkCircle(id){
				let result = await this.$apis.deleteWorkCircle({id:id});	
				this.getComment();
			},
			toHomePage(id){
				uni.navigateTo({
					url:"/pages/releaseNumber/index?id="+id
				})
			},
			previewImage(index,files) { //预览图片
				let imgs = files;					
				let urls = [];
				for(var i in imgs){
					urls.push(imgs[i].image);
				}
				console.log(urls);
				uni.previewImage({
					current:index,
					urls: urls
				});
			},
			toTiao(index){
				this.reqBody.index = 1;
				this.currentTab = index;
				this.reqBody.state = this.navData[index].value				
				this.getComment();
			},
			openInput() {
				this.inputShow = true;
				this.reply_id = 0
				this.reply_user_id = 0
				this.inputPlaceholder = '写下你评论吧'
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				setTimeout(() => {
					this.inputShow = false
				}, 100);
				this.InputBottom = 0
			},
			async sendMsg() {
				this.commentList[this.openIndex].show = false;//隐藏点赞弹层
				let comment = this.comment;
				this.plBody.comments = this.inputText;
				this.plBody.userId = this.userInfo.id;
				this.plBody.workId = comment.id;
				let result = await this.$apis.addWorkCircleComment(this.plBody);
				
				if(result.code == 200){
					this.getComment();
					uni.showToast({
						title:"评论成功"
					})
				}
			},
			showComment(item){
				this.commentList[this.openIndex].show = false;//隐藏点赞弹层			
				this.$delete(this.plBody,'buserId');
				this.inputPlaceholder = '写下你评论吧';
				this.inputText = '';
				this.comment = item;
				this.inputShow = !this.inputShow;
			},
			replyComment(item,pl){
				console.log(this.inputShow);
				this.commentList[this.openIndex].show = false;//隐藏点赞弹层
				if(pl){
					 this.plBody.buserId = pl.userId;
					this.inputPlaceholder = "回复"+pl.userName+":";
				}
				this.inputText = '';
				this.comment = item;
				this.inputShow = true;
				console.log(this.inputShow);
			},
			//点赞人数组转换字符
			getDzList(list){
				var arr = [];
				for(var i in list){
					if(list[i].userName != undefined){				
						arr.push(list[i].userName);
					}
				}
				return arr.join('、')
			},
			// 跳转到全部回复
			toAllReply() {
				uni.navigateTo({
					url: '/pages/template/comment/reply'
				});
			},
			// 点赞
			async getLike(id) {
				this.commentList[this.openIndex].show = false;//隐藏点赞弹层
				let reqBody = {},userId = this.$store.state.userInfo.id;
				reqBody['userId'] = userId;
				reqBody['workId'] = id;
				let result = await this.$apis.addWorkCircleSupport(reqBody);
				if(result.code==200){
					this.getComment();
					uni.showToast({
						title:result.message
					})
				}
			},				
			open(index){
				this.inputShow = false;
				this.openIndex = index;
				this.commentList[index].show = !this.commentList[index].show;
			},
			// 评论列表
			async getComment(page) {
				let result = [];
				if(this.currentTab == 3){
					result = await this.$apis.hotshotColumn(this.reqBody);
				result.data = result.data != undefined? result.data.content:[];
				}else if(this.currentTab == 4){
					result = await this.$apis.rewardQuiz(this.reqBody);
				result.data = result.data != undefined? result.data.content:[];
				}else if(this.currentTab == 5){
					this.$delete(this.reqBody,'state');
					result = await this.$apis.listTopAdPage(this.reqBody);
					result.data = result.data != undefined? result.data.content:[];
				}else{
					result = await this.$apis.workCircles(this.reqBody);
					result.data = result.data != undefined? result.data.content:[];
				}				
				if(result.data.length){
					for(var i in result.data){
						result.data[i].show = false;
						if(result.data[i].imgUrl != '' && result.data[i].imgUrl != undefined){
							if(result.data[i].imgUrl.indexOf(',') == -1){
								result.data[i].list = [{
									image: this.baseUrl+result.data[i].imgUrl
								}];
							}else{
								var list = [];
								var imgUrls = result.data[i].imgUrl.split(',');
								for(var j in imgUrls){
									list.push({image:this.baseUrl+imgUrls[j]});
								}
								result.data[i].list = list;
							}
							console.log(list);
						}
						if(result.data[i].extraData != '' && result.data[i].extraData != null){
							result.data[i].extraData = JSON.parse(result.data[i].extraData);
						}
					}
				}
				if(page){
					this.commentList = this.commentList.concat(result.data);
				}else{
					this.commentList = result.data;
				}
				if(this.currentTab == 5) this.commentList = [];
				console.log(this.commentList);
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {		
		background-color: #ffffff;
	}
	.container {padding-top: 85rpx;}
	.fiexd-head {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top:88rpx;
		/* #endif */
		left: 0;
		z-index: 99;
		width: 100%;
		height: 82rpx;
	}

	.header {
		width: 750rpx;
		background: linear-gradient(0deg, #ac62ff, #df62ff);

	}

	.nav {
		width: 100%;
		padding: 15rpx 0 29rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 28rpx;
		white-space: nowrap;

		.nav-item {
			padding:0 35rpx;
			display: inline-block;
			text-align: center;
			color: #fff;
				padding-bottom:10rpx;

			&.active {
				color: #fff;
				font-size: 34rpx;
				position: relative;
			}
			&.active:after {
				content: '';
				position: absolute;
				left:42%;
				bottom:0;
				width:20%;
				border-bottom: 2px solid #fff;	
border-radius: 3rpx;
			} 
		}
	}


	.comment {
		display: flex;
		padding: 30rpx;

		.right {
			flex: 1;
			padding-left: 30rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				font-size: 32rpx;
				color: #6268F2;



				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.tupian image {
				width: 40%;
				height: 160rpx;
				border-radius: 10px;
				margin-right: 20rpx;
			}
			.tupian image.w28 {width:28%}

			.reply-box {
				background: #F5F5F9;
				border-radius: 6rpx;

				.item {

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;
			}

			.pinglun image {
				width: 48rpx;
				height: 48rpx;
			}

			.zanpinglun {
				width: 241rpx;
				height: 60rpx;
				background: #6268F1;
				border-radius: 6rpx;

			}
		}
	}
	
	.border-bottom {
		border-bottom: 1px solid #303030;
	}
	
	.cu-card {
	
	
		height: 100vh;
		// 不知哪儿来的动画属性将卡片隐藏强制不让隐藏
		transform: scale(1) !important;
	}
		
	.input {
		background-color: #222;
	}
	
	.cosmos-scroll-view {
		height: 90vh;
	}
	
	.my-screen-swiper {
		bottom: 0;
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		white-space: nowrap;
		box-sizing: border-box;
		overflow: hidden;
		line-height: 100rpx;
		z-index: 999;
	}
	
.cu-btn {
	position: relative;
	border: 0upx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 30upx;
	font-size: 28upx;
	height: 64upx;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	margin-left: initial;
	transform: translate(0upx, 0upx);
	margin-right: initial;
}

.cu-btn::after {
	display: none;
}
.cu-avatar {
			width: 40rpx;
			height:40rpx;
			margin: 0 20rpx;
			border-radius: 30rpx;
		}

.foot {position: fixed;bottom: 0;z-index:10;display: flex;justify-content: space-between; align-items: center; background-color: #fff;width:100%;padding:15rpx;
	input {width:65%;margin-right:2%;height:50rpx;background-color: #F5F5F9;border-radius: 15rpx;font-size:20rpx;padding:10rpx;}
}
	.rank-img {height:40rpx;}
	.none {
		display: none;
	}
	.f-logo {
		width: 102rpx;
		height: 118rpx;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		background-size: auto 100%;
		background-position: center center;
		background-repeat: no-repeat;
		overflow: hidden;
		image {
			width: 102rpx;
			height: 118rpx;
		}
	}
</style>
